﻿var Rings; /* Array of "Ring" objects that contains the ring name, ring image and marker image */


/**
 *  Fills the "Rings" array with the default set of rings to make it ready for loading
 */
function setupDefaultRings()
{
  Rings = new Array(DEF_NUM_RINGS);
  for (var i=0; i<DEF_NUM_RINGS; i++)
    Rings[i] = new Ring("", null,null);

  Rings[0].ringName = RING_TYPE[5];
  Rings[1].ringName = RING_TYPE[3];
  Rings[2].ringName = RING_TYPE[1];
  Rings[3].ringName = RING_TYPE[0];
}



/**
 *  Loads the desired set of rings 
 * @param numRings number of rings to be loaded depending on user's preferences
 */
function loadRings(numRings)
{
  view.removeAllElements();

  var numDivisions = numRings * 2;
  var divSize = view.width / numDivisions;

  var ringCount = numRings;
  var position = Math.abs(ringCount - numRings);

  /* Displaying the rings */
  for( var i=0; i<numRings; i++ )
  {
    /* Order of rings is decreasing from outer to inner */
    Rings[i].ringImg = loadRing(Rings[i].ringName, numRings, ringCount, position );
    ringCount--;
    position = Math.abs(ringCount - numRings);
  }

  /* Resetting counter */
  ringCount = numRings;

  /* Loading the markers */
  for( var i=0; i<numRings; i++ )
  {
    Rings[i].marker = loadMarker(numRings, ringCount, i); 
    ringCount--;
  }

  /* Begin cycling */
  onTimeout();

  loadOptions();

  for( var i=0; i<numRings; i++ )
   setupColorChanger(Rings[i].ringName);
}












/**
 *  Loads the desired set of rings
 * @param ringType determines what ring image to load
 * @param numRings number of rings to be loaded
 * @param ringCount counter to determine the dimensions of the ring in the display pane
 * @param position counter to determine the positions of the ring in the display paneSize
 * @returns ring new ring image object is saved to array of ring objects
 */
function loadRing (ringType, numRings, ringCount, position )
{
  var numDivisions = numRings * 2;
  var divSize = view.width / numDivisions;
  var ring = view.appendElement("<img />");
  ringType = mergeString(ringType);
  ring.src = 'images/ring/' + ringType + '/white.png';
  ring.height = (ringCount * divSize) * 2;
  ring.width = (ringCount * divSize) * 2;
  ring.x = position * divSize;
  ring.y = position * divSize;

  return ring;
}

/**
 *  Loads the markers with their default positions on their corresponding rings
 * @param numMarkers number of markers to be loaded
 * @param ringCount counter to determine the dimensions of the ring in the display paneSize
 * @param i position of interest in the array of markers, userful for determining the yearlysquare
 *                center which has the last position and it has a different declaration as the other 
 *                markers, it is a "label" instead of an "image"
 * @returns marker new marker image/label object is saved to array of image/label objects
 */
function loadMarker(numMarkers, ringCount, i)
{
  var numDivisions = numMarkers * 2;
  var divSize = view.width / numDivisions;

  var marker;

  if (( i == numMarkers -1) && (Rings[i].ringName == RING_TYPE[0] )) /* Yearly Label for center square */
  {
    marker = view.appendElement("<label />");
    marker.height = divSize * 2 ;
    marker.width = divSize * 2 ;
    marker.align = 'center';
    marker.bold = 'true';
    marker.innerText = 'YEAR';
    marker.align = 'center';
    marker.size = 2 * (divSize / 5) ;
    marker.x = ((numMarkers - 1) * divSize) + (divSize / 100);
    marker.y = ((numMarkers - 1) * divSize) + (divSize / 2);

    return marker;
  }

  else /* Other ring markers */
  {
    marker = view.appendElement("<img />");
    marker.src = 'images/marker/whiteOpposite.png';
    marker.height = view.height / (numDivisions * 2);
    marker.width =  view.height / (numDivisions * 2);
    marker.x = view.width / 2;
    marker.y = view.height / 2;
    marker.pinY = Math.round(( divSize * (ringCount)) - (marker.width / 2));
    marker.pinX = marker.width / 2;

    return marker;
  }
}

